<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    //form  dom树-->
<!--    //1.文本框 text-->
<!--    //2下拉框  select-->
<!--    //3单选框  radio-->
<!--    //4多选框   checkbox-->
<!--    //5隐藏狂   hidden-->
<!--    //6密码框   password-->
    <form action="post">
      <p>
          //requeird必填字段
        <span>用户名：</span><input type="text" id="username" required>
      </p>
        <p>
<!--            多选框就是定义好的-->
            <span>性别：</span>
            <input type="radio" name="sex" value="man" id="boy">男
            <input type="radio" name="sex" value="woman" id="girl">女
        </p>
        <input type="submit">
    </form>

<script>
  var input_text = document.getElementById('username');
  var boy_radio = document.getElementById('boy');
  var girl_radio = document.getElementById('girl');
</script>
</body>
</html>